<template>
  <div class="app-container">
    <!-- <el-row><h1>波尔管控中心调用</h1></el-row> -->
    <el-col :span="18">
      <div id="Boer" style="width: 1200px; height: 700px"></div>
    </el-col>

    <el-row>
      <el-form
        ref="requestForm"
        :inline="false"
        class=""
        :model="requestForm"
        label-width="120px"
      >
        <el-col :span="6">
          <el-form-item label="起始频率:" prop="startUnit">
            <el-input
              v-model="formItem.startUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="终止频率:" prop="endUnit">
            <el-input
              v-model="formItem.endUnit"
              type="text"
              placeholder=""
              style="width: 220px"
            >
              <i slot="suffix" style="font-style: normal; margin-right: 10px">
                /{{ freqUnit }}
              </i>
            </el-input>
          </el-form-item>

          <el-form-item label="步进:" prop="step">
            <el-select v-model="formItem.step" style="width: 220px">
              <el-option
                v-for="item in stepList"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="start">启动</el-button>
            <el-button type="danger" @click="stop">停止</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// import * as Echarts from 'echarts/lib/echarts'
let ws = null
let heartHandler = null
let myChart = null
export default {
  name: 'Boer',
  data: () => {
    return {
      requestForm: {},
      selected: '',
      list: [],
      formItem: {
        startUnit: '',
        endUnit: '',
        step: '',
      },
      stepList: [
        {
          id: 25,
          val: '25kHz',
        },
        {
          id: 50,
          val: '50kHz',
        },
        {
          id: 100,
          val: '100kHz',
        },
      ],
      freqUnit: 'Mhz',
      orgOptions: {},
    }
  },
  mounted () {
    myChart = this.$echarts.init(document.getElementById('Boer'))
  },
  methods: {
    start: function () {
      console.log('开始连接Ws')
      // ws = new WebSocket("ws://127.0.0.1:6003/ws");
      ws = new WebSocket('ws://47.118.20.181:6003/ws') //公网

      // eslint-disable-next-line no-unused-vars
      ws.onopen = function (evt) {
        console.log('Connection opened')
        heartHandler = setInterval(() => {
          ws.send('keepalive')
        }, 3000)
        let obj = {
          cmd: 'start',
          type: 'B_PScan',
          startfreq: 925000000,
          stopfreq: 960000000,
          step: 100000,
        }
        let cmd = JSON.stringify(obj)
        ws.send(cmd)
      }.bind(this)

      ws.onmessage = function (evt) {
        // console.log('收到消息')
        let traceData = evt.data
        // console.log(traceData)
        // this.onTraceData(traceData);
        let [x, y] = onRecords(traceData)
        // eslint-disable-next-line no-unused-vars
        let unit = 'dbuv'
        let orgOptions = {
          title: {
            text: '波尔管控中心调用',
            left: 'center',
          },
          // backgroundColor: 'black',
          // darkMode: true,
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            show: true,
            data: ['强度'],
            left: 'left',
            formatter: function (name) {
              return name + '(' + unit + ')'
            },
          },
          xAxis: {
            data: x,
            axisLabel: {
              // eslint-disable-next-line no-unused-vars
              formatter: function (value, index) {
                return value + 'MHz'
              },
            },
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '强度',
              type: 'line',
              data: y,
            },
          ],
        }
        myChart.setOption(orgOptions)
      }

      // eslint-disable-next-line no-unused-vars
      ws.onclose = function (evt) {
        console.log('Connection closed.')
      }
    }.bind(this),
    stop: function () {
      let obj = { cmd: 'stop' }
      let cmd = JSON.stringify(obj)
      ws.send(cmd)
      if (heartHandler) {
        clearInterval(heartHandler)
        heartHandler = null
      }
      if (ws) {
        ws.close()
        ws = null
      }
    }.bind(this),
  },
}
// eslint-disable-next-line no-unused-vars
function onRecords (_data) {
  // eslint-disable-next-line no-unused-vars
  let { startfreq, stepfreq, data } = JSON.parse(_data)
  let trace = String(data).split(',')
  let freqPoint = []
  let pointCount = trace.length
  for (let i = 0; i < pointCount; i++) {
    // trace[i] = parseFloat(trace[i]);
    let traceY = parseFloat(trace[i]) / 10;
    trace[i] = traceY;
    // freqPoint.push((startfreq + i * stepfreq) / 1000000)
    let traceX = (parseInt(startfreq) + i * parseInt(stepfreq)) / 1000000
    freqPoint.push(traceX)
    // console.log(`xy:{traceX} {traceY}`);

  }
  return [freqPoint, trace]
}
</script>

<style scoped></style>
